import { View } from '@tarojs/components';
import styles from './style.scss';
import { ReactNode } from 'react';

type Props = {
  onClose?: () => void;
  onConfirm?: () => void;
  visible?: boolean;
  children?: ReactNode;
  header?: ReactNode;
  width?: string;
  okText?: string | ReactNode;
  cancelText?: string | ReactNode;
  confirmLoading?: boolean;
};

export default (props: Props) => {
  const {
    children,
    onClose,
    onConfirm,
    visible,
    header,
    width = '70vw',
    okText = '确定',
    cancelText = '取消',
    confirmLoading,
  } = props;
  return visible ? (
    <View className={styles.container}>
      <View className={styles.mask}></View>
      <View className={styles.mainWrap} style={{ width: width }}>
        {header && <View className={styles.header}>{header}</View>}
        <View className={styles.content}>{children}</View>
        <View className={styles.buttonwrap}>
          <View className={styles.item} onClick={onClose}>
            {cancelText}
          </View>
          <View
            className={styles.item}
            onClick={() => {
              if (!confirmLoading) {
                onConfirm?.();
              }
            }}
          >
            {okText}
          </View>
        </View>
      </View>
    </View>
  ) : null;
};
